<template>
	<div class="root_view" :style="{ backgroundColor: bgColor }">
		<pageViewHeader v-if="showHeader" style="margin-bottom: 6px;">
			<template #headerTool>
				<slot name="headerTool"></slot>
			</template>
		</pageViewHeader>
		<div style="flex: 1;height: 100%;overflow-y: auto;" class="row">
			<div style="margin-right: 6px;" v-if="$slots.left">
				<slot name="left"></slot>
			</div>
			<!-- 内容 -->
			<div class="flex1" style="width: 100%;position: relative;">
				<slot></slot>
			</div>
			<div style="margin-left: 6px;" v-if="$slots.right">
				<slot name="right"></slot>
			</div>
		</div>
	</div>
</template>

<script>
import pageViewHeader from './pageViewHeader.vue'
export default {
	name: 'pageViewContainer',
	components: { pageViewHeader },
	props: {
		showHeader: {
			type: Boolean,
			default: true
		},
		bgColor: {
			type: String,
			default: 'rgba(255, 255, 255, 0)'
		}
	},
	data() {
		return {
		}
	}
}
</script>

<style scoped lang="less">
.root_view {
	display: flex;
	flex-direction: column;
	height: 100%;
}


@keyframes pulse {
	0% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.8;
		transform: scale(1.02);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* 对移动中的元素应用的过渡 */
.right-enter-active,
.right-leave-active {
	transition: all 0.5s ease;
}

.right-enter-from,
.right-leave-to {
	opacity: 0;
	width: 0px !important;
}
</style>